<!DOCTYPE html>
<html>
<head>
    <title>Linkit</title>
    <meta charset="utf-8">
    <script src="./javascripts/lib/raphael-min.js" type="text/javascript"></script>
    <script src="./javascripts/src/Class.js" type="text/javascript"></script>
    <script src="./javascripts/src/enums/ECardinalPoint.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/AbstractShape.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/Linkable.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/primitives/Point.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/primitives/Line.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/primitives/Polygon.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/primitives/Polyline.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/primitives/Rectangle.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/primitives/Ellipse.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/primitives/Circle.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/polygons/PredefinedPolygon.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/polygons/Triangle.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/polygons/Diamond.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/composites/Composite.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/customs/Anchor.js" type="text/javascript"></script>
    <script src="javascripts/src/shapes/composites/links/AbstractLink.js" type="text/javascript"></script>
    <script src="javascripts/src/shapes/composites/links/Link.js" type="text/javascript"></script>
    <script src="javascripts/src/shapes/composites/links/PolyLink.js" type="text/javascript"></script>
    <script src="javascripts/src/shapes/composites/links/CurveLink.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/customs/HTMLContainer.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/customs/Text.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/composites/Label.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/customs/images/AbstractImage.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/customs/images/SVGImage.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/customs/images/BitmapImage.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/customs/uml/Clazz.js" type="text/javascript"></script>
    <script src="./javascripts/src/shapes/primitives/BezierCurve.js" type="text/javascript"></script>
    <script src="./javascripts/src/workspaces/AbstractWorkspace.js" type="text/javascript"></script>
    <script src="./javascripts/src/workspaces/SVGWorkspace.js" type="text/javascript"></script>
    <script src="./javascripts/src/workspaces/RaphaelWorkspace.js" type="text/javascript"></script>
    <script src="./javascripts/src/workspaces/Dragger.js" type="text/javascript"></script>
    <script src="./javascripts/src/Linker.js" type="text/javascript"></script>
    <!--<script src="./javascripts/builds/linkit.min.js" type="text/javascript"></script>-->
    <link rel="stylesheet" media="screen" href="./stylesheets/linkit.css">
    <link rel="stylesheet" media="screen" href="./stylesheets/uml.css">
    <script type="text/javascript">

    window.onload = function(){
        RAPH = Raphael("workspace");
    }
    function test(){

        var workspace = new RaphaelWorkspace(RAPH);
        workspace.clearAll();

        var linker = new Linker();
        var rectangle0 = new Rectangle(new Point(100,200), 100, 100);
        var rectangle1 = new Rectangle(new Point(100,20), 100, 100);
        var rectangle2 = new Rectangle(new Point(500,200), 100, 100);
        var rectangle3 = new Rectangle(new Point(500,20), 100, 100);
        var circle1 = new Circle(new Point(700,200), 50);
        var ellipse1 = new Ellipse(new Point(950,200), 50, 100);

        workspace.add(rectangle1);
        workspace.add(rectangle0);
        workspace.add(rectangle2);
        workspace.add(rectangle3);
        workspace.add(circle1);
        workspace.add(ellipse1);


        var link1 = new Link(new Triangle(),new Diamond(),new Label("Label"));
        var link2 = new Link();
        var link3 = new Link();
        var link4 = new Link(null,null,new Label("label"),new Label("label plus long"));

        linker.linkit(rectangle1,rectangle2,link1);
        linker.linkit(rectangle2,rectangle3,link2);
        linker.linkit(ellipse1,rectangle3,link3);
        linker.linkit(ellipse1,circle1,link4);
        workspace.add(link1);
        workspace.add(link2);
        workspace.add(link3);
        workspace.add(link4);
        workspace.drawAll();
    }

    function test2(){
        var workspace = new RaphaelWorkspace(RAPH);
        workspace.clearAll();
        var origin1 = new Point(200,200);
        workspace.add(origin1);



        var triangle = new Triangle(origin1);

        triangle.rotate(-60);
        triangle.scale(2);
        workspace.add(triangle);
        var origin2 = new Point(400,200);
        workspace.add(origin2);

        var diamond= new Diamond(origin2);
        workspace.add(diamond);
        diamond.rotate(-90);
        var endLink = new Triangle();
        var link1 = new Link(new Triangle(), endLink, null, null,null, new Point(500,100), new Point(700,300));
        endLink.scale(2);
        link1.setStartPolygon(new Diamond());
        link1.setStart(new Point(800,200));
        workspace.add(link1);



        workspace.drawAll();

    }
    function test3(){
        var workspace = new RaphaelWorkspace(RAPH);
        workspace.clearAll();
        var linker = new Linker();
        var ellipse = new Ellipse(new Point(200,200), 150, 100);
        var box = ellipse.getBox();
        var inBox = ellipse.getInBox();
        var eastPoint = new Circle(new Point(600,350),5);
        var link = new CurveLink(new Triangle(), new Triangle());
        linker.linkit(ellipse, eastPoint, link);
        workspace.add(link);
        workspace.add(eastPoint);
        workspace.add(ellipse);
        workspace.add(box);
        workspace.add(inBox);
        workspace.drawAll();
    }


    function test5(){
        var workspace = new RaphaelWorkspace(RAPH);
        workspace.clearAll();

        var linker = new Linker();

        var image = new BitmapImage(new Point(200,200), "http://10.1.13.133:8000/images/osa_icons_svg/osa_server_web.svg",128);
        var image2 = new SVGImage(new Point(500,250), "http://10.1.13.133:8000/images/osa_icons_svg/osa_media-optical.svg");
        var image3 = new BitmapImage(new Point(800,150), "https://www.google.fr/images/srpr/logo3w.png", 275, 95);

        var link = new PolyLink(
                new Triangle(),
                null,
                new Label("Start label"),
                new Label("End label"),
                new Label("Middle label")
        );
        var link2 = new CurveLink(
                new Triangle(),
                new Triangle(),
                new Label("Label"),
                new Label("Label"),
                new Label("Label")
        );
        linker.linkit(image, image2, link);
        linker.linkit(image, image3, link2);
        var link3 = linker.linkit(image2, image3);
        link3.setStartPolygon(new Diamond())
        workspace.add(image);
        workspace.add(image2);
        workspace.add(image3);
        workspace.add(link);
        workspace.add(link2);
        workspace.add(link3);
        workspace.drawAll();
    }
    function test6(){
        var workspace = new RaphaelWorkspace(RAPH);
        workspace.clearAll();

        var label1 = new Label("Ceci est un test",new Point(300,200));
        var label2 = new Label("Ceci est un \n autre test",new Point(500,100));
        workspace.add(label1);
        workspace.add(label2);
        var link = new CurveLink();
        var linker = new Linker();
        linker.linkit(label1, label2,link);
        workspace.add(link);

        var p1 = new Point(100,100);
        var p2 = new Point(150,200);
        workspace.add(p1);
        workspace.add(p2);
        var link2 = linker.linkit(p1,p2);
        workspace.add(link2);
        workspace.drawAll();

    }
    </script>
</head>
<body>
    <button onclick="test();">Test</button>
    <button onclick="test2();">Test 2</button>
    <button onclick="test3();">Test 3</button>
    <button onclick="test5();">Test 5</button>
    <button onclick="test6();">Test 6</button>
    <div id="workspace"></div>
</body>
</html>
